<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body>
<div class="container">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>点击次数</th>
            <th>短连接</th>
        </tr>
        </thead>
        <tbody id="data-body">

        </tbody>
    </table>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<script>
    $(function () {
        $.ajax({
            url: '/ranks',
            success: function (r) {
                $("#data-body").empty();
                var rows = "";
                for (var key in r) {
                    rows = rows + "<tr><td>" + r[key]['score'] + "</td><td>" + r[key]['value'] + "</td></tr>";
                }
                $("#data-body").append(rows);
            },
            error: function () {
                alert('加载失败');
            }
        })
    })
</script>
</html>